import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { NavBar, List,Image } from 'antd-mobile'
import http from '../../utils/http'

const Message = () => {
  const nav = useNavigate()
  const [list, setList] = useState([])

  const getData = async () => {
    const res = await http.get("/api/list")
    const { code, data } = res.data
    console.log(data);
    if (code === 200) {
      setList(data)
    }
  }

  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <NavBar onBack={() => nav(-1)}>消息列表</NavBar>
      <div>
         <List>
              {list.length > 0 && list.map((item,ind) => {
                  return <List.Item
                  onClick={()=>nav("/messagePage")}
                  key={ind}
                  prefix={
                    <Image
                      src={item.image}
                      style={{ borderRadius: 20 }}
                      fit='cover'
                      width={40}
                      height={40}
                    />
                  }
                  description={item.title}
                >
                  <dd>{item.date}</dd>
                </List.Item>
              })}
            </List>
         
      </div>
    </div>
  )
}

export default Message
